<template>
  <el-row>
    <span style="margin-top:10px;">Before Amount:</span>
    <el-input v-model="beforeAmt" style="width: 240px;margin:10px;" placeholder="Please input" />
    <el-button type="primary" style="margin-right:10px;margin-top:10px;" round @click="exchangeBeforeAndAfterAmt">
      <svg width="16" height="16" fill="currentColor" class="bi bi-arrow-left-right" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z"/>
      </svg>
    </el-button>
    <span style="margin-top:10px;">After Amount:</span>
    <el-input v-model="afterAmt" style="width: 240px;margin:10px;" placeholder="Please input" />
    <span style="margin-top:10px;">CapAmt:</span>
    <el-input v-model="capAmt" style="width: 240px;margin:10px;" placeholder="Please input" />
  </el-row>
  <el-row>
    <el-button type="primary" @click="calculatorAmt" style="margin:10px;">Calculate</el-button>
  </el-row>
  <el-row>
    <span style="margin-top:10px;">Different Amount:</span>
    <el-input v-model="diffAmt" style="width: 240px;margin:10px;" placeholder="Please input" disabled />
    <span style="margin-top:10px;">Different Rate:</span>
    <el-input v-model="diffRate" style="width: 240px;margin:10px;" placeholder="Please input" disabled />
  </el-row>
  <el-row v-if="false">
    <el-input v-model="predictRealDiffAmt" style="width: 240px;margin:10px;" placeholder="Please input" disabled />
    <el-input v-model="predictRealDiffRate" style="width: 240px;margin:10px;" placeholder="Please input" disabled />
  </el-row>

</template>

<script lang="ts" setup>
import { ref,onMounted,onUnmounted,watch } from 'vue'
import { XAmountUtil } from '../../ts/util/XAmountUtil.ts'
const beforeAmt = ref(localStorage.getItem('CalculatorShanghaiCompositeIndex|' + 'beforeAmt') || '0');
const afterAmt = ref(localStorage.getItem('CalculatorShanghaiCompositeIndex|' + 'afterAmt') || '0')
const capAmt = ref(localStorage.getItem('CalculatorShanghaiCompositeIndex|' + 'capAmt') || '0')
const diffAmt = ref(localStorage.getItem('CalculatorShanghaiCompositeIndex|' + 'diffAmt') || '0')
const diffRate = ref(localStorage.getItem('CalculatorShanghaiCompositeIndex|' + 'diffRate') || '0')
const predictRealDiffAmt = ref(localStorage.getItem('CalculatorShanghaiCompositeIndex|' + 'predictRealDiffAmt') || '0')
const predictRealDiffRate = ref(localStorage.getItem('CalculatorShanghaiCompositeIndex|' + 'predictRealDiffRate') || '0')


watch([beforeAmt,afterAmt,capAmt,diffAmt,diffRate,predictRealDiffAmt,predictRealDiffRate], (newValues,oldValues) => {
  localStorage.setItem('CalculatorShanghaiCompositeIndex|' + 'beforeAmt', newValues[0]);
  localStorage.setItem('CalculatorShanghaiCompositeIndex|' + 'afterAmt', newValues[1]);
  localStorage.setItem('CalculatorShanghaiCompositeIndex|' + 'capAmt', newValues[2]);
  localStorage.setItem('CalculatorShanghaiCompositeIndex|' + 'diffAmt', newValues[3]);
  localStorage.setItem('CalculatorShanghaiCompositeIndex|' + 'diffRate', newValues[4]);
  localStorage.setItem('CalculatorShanghaiCompositeIndex|' + 'predictRealDiffAmt', newValues[5]);
  localStorage.setItem('CalculatorShanghaiCompositeIndex|' + 'predictRealDiffRate', newValues[6]);
});

const calculatorAmt = () => {
  diffRate.value = XAmountUtil.roundAmt((afterAmt.value - beforeAmt.value) / beforeAmt.value * 100);
  diffAmt.value = XAmountUtil.roundAmt(diffRate.value / 100 * capAmt.value);
  predictRealDiffAmt.value = XAmountUtil.roundAmt(diffAmt.value - (5+10));
  predictRealDiffRate.value = XAmountUtil.roundAmt((afterAmt.value - beforeAmt.value) / beforeAmt.value * 100);
}

const exchangeBeforeAndAfterAmt = () => {
    const tmpAmt = afterAmt.value;
    afterAmt.value = beforeAmt.value;
    beforeAmt.value = tmpAmt;
}


// 绑定enter快捷键、
const handleKeyUp = (event) => {
  if (event.key === 'Enter') {
    calculatorAmt();
  }
};

onMounted(() => {
  window.addEventListener('keyup', handleKeyUp);
});

onUnmounted(() => {
  window.removeEventListener('keyup', handleKeyUp);
});
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>